<template>
    <div style="height: 100%; width:1000px; ">
        <a-container>
            <a-header>数据指标分布图表</a-header>
            <a-main>
                <div ref="chartContainer" style="width: 100%; height: 400px;"></div>
            </a-main>
        </a-container>
        <moduleAppTable class="app-table"
                        height="7.76rem"
                        :defaultTabs="defaultTabs"
                        :tableData="tableData"
                        @changeTab="changeTab"
                        @row-click="rowClick"></moduleAppTable>
            <a-tree
                :data="treeData"
                height="1000px"
                size="mini"
                style="display: block"
                width="200px"
                :default-expanded-keys="['0-0-0']"
                :default-selected-keys="['0-0-0', '0-0-1']"
            />
        <arco-table :columns="columns"
                    :data="tableArcoData"
                    :pagination="false"
                    :scrollbar="true"
                    :scroll="scroll"
                    :rowClass="rowClassName"
                    :hoverable="true"
                    @row-click="rowClick">
            <template #app_name_zh_cn="{ record }">
                <div style="display: flex">
                    <arco-tooltip :content="record.app_name_zh_cn"><span class="name-text">{{
                            record.app_name_zh_cn
                        }}</span></arco-tooltip>

                    <vptPalnTag v-if="record.process_status == 2"
                                type="warn"
                                text="提示"
                                :tagStyle="{
              height: '0.25rem',
              background: '#FFC300',
              color: '#fff',
              fontSize: '0.12rem',
            }"></vptPalnTag>
                    <vptPalnTag v-if="record.process_status == 1"
                                type="danger"
                                text="告警"
                                :tagStyle="{
              height: '0.25rem',
              background: '#F53F3F',
              color: '#fff',
              fontSize: '0.12rem',
            }"></vptPalnTag>
                </div>
            </template>
            <template #prompt="{ record }">
        <span class="vpt-em-organge">
          {{ addThousandsSeparator(record.prompt) }}
        </span>
            </template>
            <template #warning="{ record }">
        <span class="vpt-em-red">
          {{ addThousandsSeparator(record.warning) }}
        </span>
            </template>
            <template #memory_usage="{ record }">
        <span :style="{
            color:
              record.memory_usage >= 80
                ? '#f53f3f'
                : record.memory_usage >= 50
                ? '#fabf01'
                : '#fff',
          }">{{ record.memory_usage }}</span>
            </template>
            <template #disk_usage="{ record }">
        <span :style="{
            color:
              record.disk_usage >= 80
                ? '#f53f3f'
                : record.disk_usage >= 50
                ? '#fabf01'
                : '#fff',
          }">
          {{ record.disk_usage }}</span>
            </template>
            <template #cpu_usage="{ record }">
        <span :style="{
            color:
              record.cpu_usage >= 80
                ? '#f53f3f'
                : record.cpu_usage >= 50
                ? '#fabf01'
                : '#fff',
          }">
          {{ record.cpu_usage }}</span>
            </template>
<!--            <template #request_time_avg="{ record }">-->
<!--                {{ addThousandsSeparator(record.request_time_avg) }}ms-->
<!--            </template>-->
<!--            <template #response_time="{ record }">-->
<!--                {{ getCellValue(record.response_time) }}ms-->
<!--            </template>-->
<!--            <template #request_num_max="{ record }">-->
<!--                {{ addThousandsSeparator(record.request_num_max) }}-->
<!--            </template>-->
        </arco-table>
    </div>

</template>

<script>
import {defineComponent, ref, onMounted, reactive} from 'vue';
import { useStore } from 'pinia';
import * as echarts from 'echarts';
import { Container, Header, Main } from '@arco-design/web-vue';
import {addThousandsSeparator} from "@/utils/formatter";

const tabOption = [
    { id: "0", name: "全部" },
    { id: "1", name: "告警" },
    { id: "2", name: "提示" },
    { id: "3", name: "正常" },
];
export default defineComponent({
    name: 'DataDistributionChart',
    methods: {addThousandsSeparator},
    components: {
        'a-container': Container,
        'a-header': Header,
        'a-main': Main,
    },
    setup() {
        const treeData = [
            {
                title: 'Trunk 0-0',
                key: '0-0',
                children: [
                    {
                        title: 'Branch 0-0-0',
                        key: '0-0-0',
                        disabled: true,
                        children: [
                            {
                                title: 'Leaf',
                                key: '0-0-0-0',
                            },
                            {
                                title: 'Leaf',
                                key: '0-0-0-1',
                            }
                        ]
                    },
                    {
                        title: 'Branch 0-0-1',
                        key: '0-0-1',
                        children: [
                            {
                                title: 'Leaf',
                                key: '0-0-1-0',
                            },
                        ]
                    },
                ],
            },
        ];
        const columns = [
            {
                title: '姓名',
                dataIndex: 'name',
                width: 150,
            },
            {
                title: '年龄',
                dataIndex: 'age',
                width: 100,
            },
            {
                title: '职位',
                dataIndex: 'position',
                width: 200,
            },
            {
                title: '入职时间',
                dataIndex: 'hireDate',
                width: 200,
            },
        ];
        function generateMockData(count) {
            const mockNames = ['张三', '李四', '王五', '赵六', '钱七'];
            const positions = ['软件工程师', '产品经理', '设计师', '市场专员', '销售代表'];

            const now = new Date();
            return Array.from({ length: count }, (_, index) => ({
                key: index, // 每条记录的唯一标识符
                name: `${mockNames[index % mockNames.length]}${index}`, // 使用循环名字加上索引作为唯一性
                age: Math.floor(Math.random() * 30) + 22, // 随机年龄
                position: positions[Math.floor(Math.random() * positions.length)], // 随机职位
                hireDate: new Date(now.getTime() - Math.floor(Math.random() * 365 * 24 * 3600 * 1000)).toLocaleDateString(), // 过去一年内的随机日期
            }));
        }

// 使用例子：生成10行虚拟数据
        const tableArcoData = generateMockData(10);
        const chartContainer = ref(null);
        // const store = useStore();

        const initChart = () => {
            const chartData = {
                total: 4923, // 总数，单位：万元（
                categories: ['操作类', '业务类', '其他'],
                values: [34, 34, 32],
            };

            const chart = echarts.init(chartContainer.value);
            const option = {
                title: {
                    text: '数据指标分布',
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)',
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                },
                series: [
                    {
                        name: '指标分布',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '60%'],
                        data: chartData.categories.map((category, index) => ({
                            value: chartData.values[index],
                            name: category,
                        })),
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)',
                            },
                        },
                        label: {
                            formatter: '{b}: {c} ({d}%)',
                        },
                    },
                ],
            };

            chart.setOption(option);
        };

        onMounted(() => {
            initChart();
        });
        const rowClassName = (record, index) => {
            console.log(record+'recode')
            if (record.process_status == 2) {
                return "row-warn-status";
            } else if (record.process_status == 1) {
                return "row-danger-status";
            }
            return "";
        };
        const rowClick = (record, index) => {
            emit("row-click", record.cluster_name);
        };
        return {
            treeData,
            rowClick,
            rowClassName,
            columns,
            tableArcoData,
            chartContainer,
        };
    },
});
// let columns = reactive([
//     {
//         title: "应用名称",
//         slotName: "app_name_zh_cn",
//         align: "left",
//         width: 180,
//     },
//     {
//         title: "容器组（pod）",
//         width: 150,
//         align: "center",
//         children: [
//             {
//                 title: "提示",
//                 tooltip: true,
//                 slotName: "prompt",
//                 align: "center",
//                 width: 70,
//                 cellClass: "ybbug",
//             },
//             {
//                 title: "告警",
//                 tooltip: true,
//                 slotName: "warning",
//                 align: "center",
//                 width: 70,
//                 cellClass: "zmbug",
//             },
//         ],
//     },
//     {
//         title: "内存",
//         slotName: "memory_usage",
//         align: "center",
//         width: 70,
//     },
//     {
//         title: "储存资源",
//         slotName: "disk_usage",
//         align: "center",
//         width: 70,
//     },
//     {
//         title: "CPU",
//         slotName: "cpu_usage",
//         align: "center",
//         width: 70,
//     },
//     {
//         title: "平均响应时间",
//         slotName: "request_time_avg",
//         align: "center",
//         width: 100,
//     },
//     {
//         title: "响应时间（最大/最小）",
//         slotName: "response_time",
//         align: "center",
//         width: 155,
//     },
//     {
//         title: "峰值请求数",
//         slotName: "request_num_max",
//         align: "center",
//         width: 80,
//     },
// ]);

// const tableArcoData = [
//
// ]


</script>

<style lang="less" scoped>


:deep(.seamless-scroll) {
    flex: 1;
    overflow: hidden;

    .arco-table-container {
        border-top: 1px solid transparent !important;
        // border-bottom: 1px solid rgba(22, 59, 104, 0.5) !important;
    }
}

.auto-scroll-box {
    display: flex;
    flex-direction: column;
    height: 100%;

    .vpt-table-header {
        :deep(.arco-table-tfoot) {
            box-shadow: none;
        }

        :deep(.arco-table-body) {
            display: none;
        }
    }

    .vpt-table-wrapper {
        :deep(.arco-table-header) {
            display: none;
        }
    }
}

.name-text {
    display: block;
    width: 1.4rem;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zmbug .vpt-em-red {
    color: #f53f3f !important;
}

// .yzbug .vpt-em-organge {
//   color: #ff7d00 !important;
// }

.ybbug .vpt-em-organge {
    color: #ffc400 !important;
}

.ybbug .vpt-em-organge {
    color: #ffc400 !important;
}

// :deep(
//     .arco-table-hover:not(.arco-table-dragging)
//       .arco-table-tr:not(.arco-table-tr-empty):not(.arco-table-tr-summary):hover
//   ) {
//   background: url("../../../../assets/img/theme3/row.png") no-repeat !important;
//   background-size: 100% 98% !important;
// }


:deep(.arco-table-td) {
    background: none !important;
}
</style>
